import { FC } from "react";
import { Spin } from "antd";
import { useDispatch } from "react-redux";
//
import useGetComponentInfo from '@/hooks/useGetComponentInfo'
import { getComponentByType } from '@/components/QuestionComponents'
//
import styles from "./EditCanvas.module.scss";
import { ComponentInfoType, changeSelectedId } from "@/store/componentReducer";

type PropsType = {
  loading: boolean;
};

function getComponent(componentInfo:ComponentInfoType){
  const { type,props}=componentInfo
  const componentConf=getComponentByType(type)
  if(componentConf==null)
    return null
  const { Component }=componentConf
  return <Component {...props}/>
}
const EditCanvas: FC<PropsType> = ({ loading }) => {

  const dispatch=useDispatch()
  const { componentList } =useGetComponentInfo()
  console.log(componentList)

  function handleClick(id:string){
    dispatch(changeSelectedId(id))
  }
  if (loading) {
    return (
      <div style={{ textAlign: "center", marginTop: "25px" }}>
        <Spin />
      </div>
    );
  }
  return (

    <div className={styles.canvas}>
      {componentList.map(c=>{
        const { fe_id }=c
        return (
          <div key={fe_id} className={styles["component-wrapper"]} onClick={()=>handleClick(fe_id)}>
            <div className={styles.component}>
         {getComponent(c)}
        </div>
          </div>
        )
      })}
      
    </div>
  );
};
export default EditCanvas;
